<template>
  <view class="cate">
    <!-- 搜索组件 -->
    <my-search bgc="#c00000" :radius="40" @click="toSearch"></my-search>
    <view class="content">
      <scroll-view scroll-y="true" class="left" :style="{height:`${wh}px`}">
        <view @click="changeActive(index)" v-for="(item,index) in cateList" :key="index" class="leftItem"
          :class="{ active: active === index}">{{item.cat_name}}</view>
      </scroll-view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="right" :style="{height:`${wh}px`}">
        <view v-for="(item,index) in subCateList" :key="index">
          <view class="title">
            / {{item.cat_name}} /
          </view>
          <!-- 渲染三级 -->
          <view class="itembox">
            <view @click="toList(subitem.cat_name)" class="item" v-for="(subitem,subindex) in item.children"
              :key="subindex">
              <image :src="subitem.cat_icon" mode="widthFix"></image>
              <text>{{subitem.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import mymixins from '../../mixins/index.js'
  export default {
    mixins: [mymixins],
    data() {
      return {
        wh: 0,
        active: 0,
        cateList: [],
        subCateList: [],
        scrollTop: 0
      };
    },
    methods: {
      toSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      toList(name) {
        uni.navigateTo({
          url: `/pages/list/list?key=${name}`
        })
      },
      changeActive(index) {
        this.active = index
        this.subCateList = this.cateList[this.active].children
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      async getcateList() {
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.cateList = res.message
        this.subCateList = this.cateList[this.active].children
      }
    },
    onLoad() {
      this.getcateList(),
        uni.getSystemInfo({
          success: (res) => {
            this.wh = res.windowHeight - 55
          }
        })
    }
  }
</script>

<style lang="scss">
  .cate {
    .content {
      display: flex;
      font-size: 12px;

      .left {
        width: 200rpx;

        .leftItem {
          height: 100rpx;
          text-align: center;
          background-color: #f7f7f7f7;
          line-height: 100rpx;

          &.active {
            background-color: #fff;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 0;
              height: 60rpx;
              width: 3px;
              background-color: #c00000;
              transform: translateY(-50%);
            }
          }

        }
      }

      .right {
        .title {
          font-weight: 700;
          text-align: center;
          line-height: 100rpx;
        }

        .itembox {
          display: flex;
          flex-wrap: wrap;

          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 33.33%;

            image {
              width: 60%;
            }
          }
        }
      }
    }
  }
</style>
